<template>
    <div class="post">
        <template v-if="postList.length>0">
            <div class="p-item" v-for="(item,index) in postList" :key="index" @click="navTo(item)">
                <div class="p-top">
                    <div class="p-top-left">
                        <div class="p-top-img"><img :src=item.imgUrl alt="" :onerror="noImg"></div>
                        <div class="p-top-cen">
                            <p class="p-top-cen-cn1">{{item.userName}}</p>
                            <p class="p-top-cen-cn2">{{item.date}}</p>
                        </div>
                    </div>
                    
                    <div class="iconfont shanchu">&#xe659;</div>
                </div>
                <template v-if = "item.content">
                    <p class="p-con">{{item.content}}</p>
                    <div v-if="!item.videoUrl" class="line-p"></div>
                </template>
                <template v-if="item.videoUrl">
                    <div class="p-video">
                        <div class="p-video-url">
                            <video :src=item.videoUrl></video>
                        </div>
                        <template v-if="item.title">
                            <div class="p-title">
                                {{item.title}}
                            </div>
                        </template>
                        <div class="line-h"></div>
                        <div class="p-video-bot">
                            <div class="bot-zan">
                                <i class="iconfont icon1">&#xe60c;</i>
                                <span class="bot-cn2">{{item.zanNum}}</span>
                            </div>
                            <div class="bot-pinglun">
                                <i class="iconfont icon1">&#xe765;</i>
                                <span class="bot-cn2">{{item.plNum}}</span>
                            </div>
                            <div class="bot-fengxiang">
                                <i class="iconfont icon1">&#xe639;</i>
                                <span class="bot-cn2">{{item.fxNum}}</span>
                            </div>
                            <i class="iconfont icon1">&#xe73a;</i>
                        </div>
                    </div>
                </template>
                <template v-if="item.videoUrl">
                    <div class="line-w"></div>
                </template>
            </div>
        </template>
        <template v-else>
            <div class="nomore">没有更多了</div>

        </template>
    </div>
</template>
<script>
export default {
    name:'post',
    props:{
        postList:Array
    },
    data: function(){
        return{
             noImg: 'this.src="/static/img/header.png"',
        }
    },
    methods:{
        navTo(item){
            console.log(item)
        }
    },
   
}
</script>
<style lang='less' scoped>
    img,video{
        width: 100%;
        height: 100%;
    }
    .line-h{
        background: #DFE1E3;
        width: 100%;
        height: 1px;
        margin-top: .14rem;
    }
    .line-w{
        width: 100%;
        height: .11rem;
        background: #F5F8FB;
    }
    .post{
        width: 100%;
        .p-item{
            width:100%;
            .p-top{
                padding: .2rem .3rem .28rem .22rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 1.1rem;
                .p-top-left{
                    display: flex;
                    .p-top-img{
                        width: 1.1rem;
                        height: 1.1rem;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .p-top-cen{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-around;
                        margin-left: .28rem;
                        .p-top-cen-cn1{
                            color: #4E4E4E;
                            font-size: .3rem;
                            font-weight: 600;
                        }
                        .p-top-cen-cn2{
                            color: #7D7D7D;
                            font-size: .28rem;
                        }
                    }
                }
                .shanchu{
                    color: #6D6D6D;
                    font-size: .38rem;
                    font-weight: 600;
                }
            }
            .p-con{
                line-height: 1.3;
                color: #7D7D7D;
                font-size: .28rem;
                letter-spacing: 1px;
                margin: 0 .31rem .2rem .31rem;
                word-break: break-all;
                text-overflow: ellipsis;
                display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                -webkit-line-clamp: 3; /** 显示的行数 **/
                overflow: hidden;  /** 隐藏超出的内容 **/
            }
            .line-p{
                background: #DFE1E3;
                height: 1px;
                margin: 0 .31rem;
            }
            .p-video{
                padding: .2rem 0 0 0;
                .p-video-url{
                    width: 7rem;
                    height: 3.2rem;
                    margin: 0 auto;
                }
                .p-title{
                    margin: .14rem 0 0 .31rem;
                    padding: .12rem .3rem;
                    color: #7D7D7D;
                    font-size: .3rem;
                    letter-spacing: 1px;
                }
                .p-video-bot{
                    padding: .16rem .3rem .12rem .26rem;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .bot-zan,.bot-pinglun,.bot-fengxiang{
                        display: flex;
                        align-items: center;
                        display: flex;
                        align-items: center;
                    }
                    .icon1{
                            color: #6D6D6D;
                            font-size: .4rem;
                            font-weight: 600;
                    }
                    .bot-cn2{
                            color: #828181;
                            font-size: .28rem;
                            margin-left: .1rem;
                        }
                }
            }
        }
    }
    .nomore{
        padding: .3rem;
        text-align: center;
    }
</style>